<template>
    <div class="box">
        <h4>子路由页面Three=显示学生详情</h4>
        <ul>
            <li>编号：{{ stu.id }}</li>
            <li>姓名：{{ stu.name }}</li>
            <li>年龄：{{ stu.sex }}</li>
            <li>电话：{{ stu.tel }}</li>
            <li>头像：{{ stu.img }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            stu:{}
        }
    },
    methods:{
        async findStudentDetail(sid=""){
            try {
                let stu = await this.$api.loadStudentDetail({ id:sid })
                this.stu = stu;
            } catch (error) {
                console.log(error);
                this.$tip("请求失败")
            }
        }
    },
    beforeRouteUpdate(to,form,next){
        // this.findStudentDetail(to.query.sid)
        next()
        this.findStudentDetail(this.$route.query.sid)
    },
    created(){
        console.log(this.$route.query);
        this.findStudentDetail(this.$route.query.sid)
    }
}
</script>

<style scoped>
.box{
    min-height: 400px;
    border: 4px dashed #ccc;
}
</style>